<template>
  <div class="yl-chat-msg" v-if="theme == 'system'">
    <span class="__system">{{ msg }} </span>
  </div>
  <div :class="[type == 'medh' ? 'yl-chat-msg-only' : 'yl-chat-msg']" v-else-if="theme == 'others'">
    <img class="__msg-avatar" :src="avatar" alt="" />
    <van-image
      class="__msg-content __msg-img"
      v-if="type == 'img'"
      :src="msg"
      @click="$emit('onImgPreview')"
    />

    <div  class="__msg-content" v-else-if="type == 'medh'">
      病史数据
      <ylMedHistory
        :medh="JSON.parse(msg)"
      ></ylMedHistory>
    </div>

    <div class="__msg-content" v-else>{{ msg }}</div>
  </div>
  <div :class="[type == 'medh' ? 'yl-chat-msg-only' : 'yl-chat-msg' ,'__self']" v-else>
    <van-image
      class="__msg-content __msg-img"
      v-if="type == 'img'"
      :src="msg"
      @click="$emit('onImgPreview')"
    />
    <div  class="__msg-content" v-else-if="type == 'medh'">
      <ylMedHistory
        :medh="JSON.parse(msg)"
      ></ylMedHistory>
      <span class="text-small" style="float: right; padding-right:20px;">用户病史数据</span>
    </div>
    <div class="__msg-content" v-else>{{ msg }}</div>
    <van-image round class="__msg-avatar" :src="avatar" alt="" />
    <!-- <img class="__msg-avatar" :src="avatar" alt="" /> -->
  </div>
</template>

<script>
export default {
  name: "ylChatMsg",
  props: {
    avatar: String,
    msg: String,
    type: String,
    theme: {
      type: String, //['self','others','system'],
      default: "others",
    },
  },
};
</script>

<style lang="scss" scoped>
.yl-chat-msg-only{
  padding: var(--padding-base);
   .__msg-avatar { display: none;}
}
.yl-chat-msg {
  display: flex;
  margin: calc(12px + 1rem) 12px;
  .__msg-avatar {
    min-width: 12vw;
    width: 12vw;
    height: 12vw;
    background: var(--color-third-text);
    border-radius: 50%;
    object-fit: cover;
  }
  .__msg-content {
    text-align: left;
    max-width: calc(100% - 30vw);
    position: relative;
    top: 1rem;
    left: 10px;
    background: #fff;
    border-bottom-left-radius: 1rem;
    border-bottom-right-radius: 1rem;
    border-top-right-radius: 1rem;
    padding: 12px;
    word-wrap: break-word;
    &.__msg-img {
      //  max-width: 30vw;
      padding: var(--padding-base);
    }
  }
  .__system {
    display: block;
    text-align: center;
    margin: 16px auto;
    font-size: small;
    color: var(--color-second-text);
  }
  &.__self {
  justify-content: right;
  > .__msg-content {
    border-bottom-left-radius: 1rem;
    border-bottom-right-radius: 1rem;
    border-top-left-radius: 1rem;
    border-top-right-radius: 0;
    left: -10px;
    background: var(--color-main);
  }
}
}


</style>